<!-- 直播详情优化 -->
<template>
  <div class="liveDetails" id="liveDetails">
    <!-- 左侧信息栏 -->
    <div class="boxleft">
      <div class="bltop fillet" v-if="Introduction">
        <div class="title">
          <img
            :src="Introduction.roomLogo"
            class="titlelogo hands"
            @click="go_to_page02(proList[0].roomId)"
          />
          <div class="zhibo">
            <p class="livingGif">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </p>
          </div>
          <p @click="go_to_page02(proList[0].roomId)" class="hands">
            <span v-if="Introduction.isShop == 1"
              ><img src="@/assets/zhao/live/shop.png"/></span
            >{{ Introduction.roomTitle }}
          </p>
        </div>
        <p class="bltime">
          开播时间
          <span>{{ timestamp(Introduction.beginUnix, "Y-M-D h:m:s") }}</span>
        </p>
        <p class="bltime">
          结束时间
          <span>{{ timestamp(Introduction.endUnix, "Y-M-D h:m:s") }}</span>
        </p>
        <p class="bltime">
          直播时长
          <span>{{
            format_time((Introduction.endUnix - Introduction.beginUnix) * 1000)
          }}</span>
        </p>
        <div class="blbtn" v-if="proList">
          <!-- <span>添加对比</span> --><span
            @click="go_to_page02(proList[0].roomId)"
            >直播大屏</span
          >
        </div>
      </div>
      <div class="blbot fillet" v-if="DetailInfo != null">
        <div class="portrait">
          <img :src="DetailInfo.logo" />
          <p>
            {{ DetailInfo.nickName
            }}<span>抖音号：{{ DetailInfo.uniqueId }}</span>
          </p>
        </div>
        <div class="infor sex">
          性别
          <img class="sex" v-if="1 > 2" src="@/assets/shi/girl.png" alt="" />
          <!-- infoData.gender == 1 -->
          <img
            class="sex"
            v-else-if="2 > 2"
            src="@/assets/shi/boy.png"
            alt=""
          />
          <span v-else>--</span>
        </div>
        <div class="infor sex">
          年龄<span>{{ DetailInfo.age }}岁</span>
        </div>
        <div class="infor mouth">
          <p>带货口碑</p>
          <div class="info_item-right">
            <el-rate
              v-model="scareValue"
              disabled
              :colors="['#4f5058', '#fd7f2c', '#ea4759']"
              score-template="{value}"
            >
            </el-rate>
            <span
              :style="{
                color:
                  scareValue >= 4
                    ? '#ea4759'
                    : scareValue >= 2 && scareValue < 4
                    ? '#fd7f2c'
                    : '#4f5058'
              }"
              >{{ scareValue }}</span
            >

            <span v-if="scareValue >= 4" style="color: #ea4759">高</span>
            <span
              v-else-if="scareValue >= 2 && scareValue < 4"
              style="color: #fd7f2c"
              >中</span
            >
            <span v-else style="color: #4f5058">低</span>
            <img
              class="num-img"
              src="@/assets/shi/k-line.png"
              @click="showMouthEchart = true"
            />
          </div>
        </div>
        <div class="infor in-num">
          粉丝总数<span>{{ format_num(dataOverView.totalFans) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="showFansEchart = true"
          />
        </div>
        <div class="infor in-num">
          点赞总数<span>{{ format_num(dataOverView.totalFavorite) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="showFabulousEchart = true"
          />
        </div>
      </div>
    </div>
    <!-- 右侧数据栏 -->
    <div class="boxright">
      <div class="tabbtn">
        <a
          href="#bgdata"
          @click="changeBg(1)"
          :class="{ showClass: showClass == 1 }"
          >直播数据分析</a
        ><a
          href="#bggoods"
          @click="changeBg(2)"
          :class="{ showClass: showClass == 2 }"
          >直播商品分析</a
        ><a
          href="#viewerbox"
          @click="changeBg(3)"
          :class="{ showClass: showClass == 3 }"
          >直播观众分析</a
        >
      </div>
      <div class="main fillet">

      </div>
    </div>
    <!-- 左侧口碑总数弹框 -->
    <el-dialog
      :visible.sync="showMouthEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">口碑趋势</div>
          <div class="switch">
            <div
              class="switch-btn"
              :class="{ native: changeBoard }"
              @click="changeList(true)"
            >
              周榜
            </div>
            <div
              class="switch-btn"
              :class="{ native: !changeBoard }"
              @click="changeList(false)"
            >
              月榜
            </div>
          </div>
        </div>
        <div class="popup_wrap-explain">
          <el-rate
            v-model="scareValue"
            disabled
            :colors="['#4f5058', '#fd7f2c', '#ea4759']"
            score-template="{value}"
          >
          </el-rate>
          <span
            :style="{
              color:
                scareValue >= 4
                  ? '#ea4759'
                  : scareValue >= 2 && scareValue < 4
                  ? '#fd7f2c'
                  : '#4f5058'
            }"
            >{{ scareValue }}</span
          >

          <span v-if="scareValue >= 4" style="color: #ea4759">高</span>
          <span
            v-else-if="scareValue >= 2 && scareValue < 4"
            style="color: #fd7f2c"
            >中</span
          >
          <span v-else style="color: #4f5058">低</span>
          <div class="text">
            带货口碑排名打败<span class="num"
              >{{ PraiseData.percentage ? PraiseData.percentage : "--" }}%</span
            >同行
          </div>
        </div>
        <div class="popup_wrap-echart">
          <KChart
            :xData="PraiseData.name"
            :series1="PraiseData.value"
            name1="口碑趋势"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 左侧粉丝总数弹框 -->
    <el-dialog
      :visible.sync="showFansEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">粉丝趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FansDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FansliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FansStartEnd"
                value-format="yyyy-MM-dd"
                @change="FansPicker"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FansEchart.xData"
            :series1="FansEchart.yData1"
            :series2="FansEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 左侧点赞总数弹框 -->
    <el-dialog
      :visible.sync="showFabulousEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">点赞趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FabulousDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FabulousliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FabulousStartEnd"
                value-format="yyyy-MM-dd"
                @change="FabulousPicker"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FabulousEchart.xData"
            :series1="FabulousEchart.yData1"
            :series2="FabulousEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>    
  </div>
</template>

<script>
import KChart from "@/pages/wang/talent/tdetails/NewComponents/KChart.vue";
export default {
  data() {
    const cityOptions = { 1: "点赞次数", 5: "涨粉人数", 3: "粉丝团人数" };
    const cityOptions1 = ["实时在线人数", "实时进场人数"];
    const cityOptions2 = ["直播期间成交订单数", "直播期间成交金额"];
    return {
      proId: null,
      checkedCities: ["点赞次数"],
      cities: cityOptions,
      cities1: cityOptions1,
      cities2: cityOptions2,
      scareValue: 4, //口碑评分
      showMouthEchart: false, //口碑趋势
      showFansEchart: false, //粉丝总数
      showFabulousEchart: false, //点赞总数
      changeBoard: true,
      Introduction: null, //直播详情简介
      DetailInfo: null, // 直播达人信息
      dataOverView: {},
      proList: [], //商品列表
      showHotRoom: false, //直播数据弹窗
      FansDays: "近7天", //粉丝趋势
      FabulousDays: "近7天", //点赞趋势
      FansliveTime: "", //粉丝弹窗选择时间
      FabulousliveTime: "", //点赞弹窗选择时间
      FansStartEnd: "",
      FabulousStartEnd: "",
      //左侧echarts弹窗数据
      FansEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },

      FabulousEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      PraiseData: {},
      page: 1,
      acts: [1, -1, -1], //tab 按钮
      res01: null,
      liveBoxData: null, //直播间弹框单项数据
      type: [],
      /* 弹窗中的折线图 */
      showJgXl: true,
      shopValue: 0,
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isUnfold2: false,
      showClass: 1
    };
  },
  components: {
    KChart,
  },
  computed: {
  },
  watch: {
    // 粉丝总数
    FansDays: function(newVal, oldVal) {
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    // 点赞总数
    FabulousDays: function(newVal, oldVal) {
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFabulousEchart();
    },
  },
  created() {},
  mounted() {
    this.GetLiveIntroduction();
    this.GetAuthorDetailInfo();
    this.showChangeList(); //口碑评分
    this.getFansEchart(); //粉丝点赞
  },
  methods: {
    changeBg(e) {
      this.showClass = e;
    },
    FansPicker() {
      //粉丝总数
      this.FansDays = "";
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    FabulousPicker() {
      //点赞总数
      this.FabulousDays = "";
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFansEchart();
    },
    // 口碑评分
    showChangeList() {
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: 1
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          this.PraiseData = res.data.data;
        });
    },
    changeList(e) {
      if (this.changeBoard == e) return; //防止一直点击同一个按钮一直请求数据
      this.changeBoard = e;
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: e ? 1 : 2
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          // this.percentage = res.data.data.percentage
          this.PraiseData = res.data.data;
        });
    },
    // 获取左侧粉丝图表数据
    getFansEchart() {
      switch (this.FansDays) {
        case "近7天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate1 = this.FansliveTime[0];
          this.endDate1 = this.FansliveTime[1];
          break;
      }
      this.FansliveTime = [this.startDate1, this.endDate1];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 1,
            star_time: this.startDate1,
            end_time: this.endDate1
          }
        })
        .then(res => {
          let that = this;
          if (res.data.code == 0) {
            this.FansEchart.yData1 = res.data.data.datas1;
            this.FansEchart.yData2 = res.data.data.datas2;
            res.data.data.dates.forEach((item, index) => {
              that.FansEchart.xData.push(that.timestamp(item, "Y-M-D"));
              return that.FansEchart.xData;
            });
          }
        });
    },
    // 获取左侧点赞趋势图表数据
    getFabulousEchart() {
      switch (this.FabulousDays) {
        case "近7天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate2 = this.FabulousliveTime[0];
          this.endDate2 = this.FabulousliveTime[1];
          break;
      }
      this.FabulousliveTime = [this.startDate2, this.endDate2];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 2,
            star_time: this.startDate2,
            end_time: this.endDate2
          }
        })
        .then(res => {
          this.FabulousEchart.yData1 = res.data.data.datas1;
          this.FabulousEchart.yData2 = res.data.data.datas2;
          res.data.data.dates.forEach((item, index) => {
            this.FabulousEchart.xData.push(this.timestamp(item, "Y-M-D"));
            return this.FabulousEchart.xData;
          });
        });
    },
    // 获取--直播详情简介信息
    GetLiveIntroduction() {
      console.log(this.$route.params.id);
      this.$axios
        .get("/api/live/GetLiveIntroduction", {
          params: {
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.Introduction = res.data.data;
          }
        });
    },
    // 获取--直播达人详情
    GetAuthorDetailInfo() {
      this.$axios
        .get("/api/author/GetAuthorDetailInfo", {
          params: {
            //
            // AuthorId:id,  //达人id
            AuthorId: "96987607056"
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.DetailInfo = res.data.data;
            this.dataOverView = res.data.data.dataOverView;
          }
        });
    },
    // 商品和小店分类
    getCateList() {
      let that = this;
      that.$axios
        .get(
          "/api/live/cate",
          {
            params: {
              // roomId: that.$route.params.id,
              roomId: this.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.cateList;
            that.shopKindList = res.data.data.shopList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /* 跳转连接 */
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, "_blank");
    },
  }
};
</script>

<style lang="less" scoped>
.liveDetails {
  display: flex;
  padding: 14px;
  box-sizing: border-box;
  /* 左侧信息栏 */
  .boxleft {
    width: 300px;
    margin-right: 10px;
    // 直播信息
    .bltop {
      padding: 20px 0 0 20px;
      margin-bottom: 10px;
      .title {
        display: flex;
        margin-bottom: 30px;
        position: relative;
        .titlelogo {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 10px;
        }
        .zhibo {
          position: absolute;
          bottom: 0;
          left: 32px;
          width: 18px;
          height: 18px;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2),
            linear-gradient(#fff, #fff);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          border-radius: 6px 0px 4px 0px;
        }
        > p {
          width: 197px;
          font-size: 16px;
          line-height: 24px;
          color: #222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          span {
            display: inline-block;
            width: 19px;
            height: 16px;
            img {
              display: block;
            }
          }
        }
        p:nth-of-type(1) {
          span {
            margin-right: 4px;
          }
        }
      }
      .bltime {
        width: 260px;
        font-size: 12px;
        color: #888888;
        padding-bottom: 20px;
        span {
          display: inline-block;
          width: 120px;
          margin-left: 26px;
          color: #222222;
        }
      }
      .bltime:nth-of-type(3) {
        width: 260px;
        border-bottom: solid 1px #efefef;
      }
      .blbtn {
        // padding: 16px 0 20px 40px;  //一个按钮时
        padding: 20px 0;
        transform: translateX(-10px);
        text-align: center;
        span {
          display: inline-block;
          width: 80px;
          line-height: 30px;
          border-radius: 4px;
          border: solid 1px #1779ff;
          font-size: 14px;
          color: #1779ff;
          text-align: center;
          cursor: pointer;
        }
        span:nth-of-type(2) {
          margin-left: 20px;
        }
      }
    }
    // 直播达人信息
    .blbot {
      padding: 20px 0 0 20px;
      .portrait {
        display: flex;
        margin-bottom: 30px;
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
        }
        p {
          font-size: 16px;
          color: #222222;
          padding: 7px 0 8px 10px;
          width: 196px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span {
            display: block;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .infor {
        padding-bottom: 20px;
        font-size: 12px;
        color: #888;
      }
      .sex {
        //性别
        img,
        span {
          margin-left: 52px;
        }
      }
      // 口碑
      .mouth {
        display: flex;
        p {
          margin-right: 26px;
        }
        .info_item-right {
          display: flex;
          span:nth-of-type(1) {
            margin-right: 5px;
          }
          img {
            width: 13px;
            height: 13px;
            margin-left: 7px;
            margin-top: 2px;
            cursor: pointer;
          }
        }
      }
      // 总数
      .in-num {
        span {
          display: inline-block;
          margin-left: 26px;
        }
        img {
          width: 13px;
          height: 13px;
          margin-left: 5px;
          margin-top: -3px;
          cursor: pointer;
        }
      }
    }
  }
  /* 右侧数据栏 */
  .boxright {
    flex: 1;
    // tab按钮
    .tabbtn > a {
      display: inline-block;
      width: 129px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #555;
      text-align: center;
      text-decoration: none;
    }
    // 数据（内容）
    .main {
      height: 778px;
      overflow-y: auto;
      padding: 20px 0 0 20px;
    }
  }











  /* 弹出框折线图 */
  .popup_wrap {
    padding: 20px 30px 0;
    .popup_wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
      }
      .switch {
        display: flex;
        .switch-btn {
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 6px 0px 0px 6px;
          border-right: none;
        }
        .switch-btn:last-child {
          border-radius: 0px 6px 6px 0px;
        }
        .native {
          background-color: #1779ff;
          color: #fff;
        }
      }

      .time_slot {
        // height: 62px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .tab01 {
          margin-right: 20px;
        }
      }
    }
    .popup_wrap-explain {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 28px;
      span {
        margin-right: 4px;
      }
      .text {
        font-size: 13px;
        color: #555;
        margin-left: 18px;
        .num {
          color: #fd7f2c;
        }
      }
    }
    .popup_wrap-echart {
      width: 100%;
      height: 300px;
    }
    .m-t30 {
      margin-top: 30px;
    }
  }
}
/* 搜索框 */
.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}

/* 弹窗中的分页 */
.pageBoxs {
  text-align: center;
  margin: 12px 0 20px 0;
}
/* 圆角 */
.fillet {
  border-radius: 4px;
  background-color: #fff;
}
/* 侧边 */
.slide {
  line-height: 1;
  font-size: 16px;
  color: #222222;
  font-weight: 600;
  border-left: 4px solid #1779ff;
  padding-right: 6px;
}
.slide > span {
  display: inline-block;
  width: 4px;
}
/* 小手 */
.hands {
  cursor: pointer;
}
/* 边框 */
.border {
  width: 1px;
  border-left: 1px solid #efefef;
}
/* 响应式 */
@media screen and (max-width: 1400px) {
  #liveDetails .moodbox {
    display: flex;
    flex-wrap: wrap;
    p {
      width: 16%;
    }
    .mbfan {
      margin-top: 30px;
    }
    .mbfans {
      margin-top: 30px;
    }
    .bor4 {
      border: 0 !important;
    }
  }
}
/*  */
.switch {
  display: flex;
  width: 108px;
  height: 28px;
  position: absolute;
  right: 98px;
  top: 12px;
  .switch-btn {
    width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: #555;
    background-color: #fff;
    border: 1px solid #efefef;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  .switch-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: none;
  }
  .switch-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-right: none;
  }
}
.switch .native {
  background-color: #1779ff;
  color: #fff;
}
/* tab 按钮的默认选中状态 */
.showClass {
  background-color: #1779ff !important;
  color: #ffff !important;
}
</style>
